<template>
    <el-dialog v-model="dialogFormVisible" @close="close" :title="title">
        <el-form ref="dialogForm" :model="dialogFormData">
            <el-form-item>
                <slot name="upload"></slot>
            </el-form-item>
            <el-form-item v-for="(v, k) in dialogFormData" :key="k" :label="v.label" :label-width="formLabelWidth"
                :prop="k + '.value'" :rules="{
                    required: true,
                    trigger: 'blur',
                    message: v.label + '不能为空'
                }">
                <el-input v-model="v.value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm(dialogForm)" type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watchEffect, toRefs } from "vue"

// 封装组件思路
// 1.根据传入的数据自动创建出 form 表单元素，目前默认 input
// 2.表单需要能够校验属性的功能
// 3.表单通过和不通过，可以回调对应方法
// 4.控制显示隐藏的属性
// 5.控制labelwidth的属性

//dia log使用说明
//属性:
//1. vis ible: Boolean
//2. dia LogFormData:0bject表单的数据{name: {label:" item的描述" , value:"对应的值"}}
//3. formLabe LWidth:Stirng label的宽度
//4. title:String dialog的标题

//事件:
//validateSuccess点击确定按钮,表单校验通过之后触发,回传个fo rm实例引用
//dialogCancel点击取消按钮触发的事件
//clsed dialog被 关闭的时候触发的事件



let props = defineProps({
    title: {
        type: String,
        default() {
            return "添加学员信息"
        }
    },
    // 控制元素显示隐藏
    visible: {
        type: Boolean,
        default() {
            return false
        }
    },
    // 弹窗表单中的数据来源
    dialogFormData: {
        type: Object,
        default() {
            return {}
        }
    },
    formLabelWidth: {
        type: String,
        default() {
            return "140px"
        }
    }
})

// 声明表单通过之后的回调
let emits = defineEmits(['validateSucess', 'dialogcancel','closed'])

// 初始值 显示隐藏
let dialogFormVisible = ref(false)

// 使用 watchEffect 倾听 props里visible的变化
let { visible } = toRefs(props)

// 实时侦听 visible 的变化
watchEffect(() => {
    // console.log(visible.value);
    dialogFormVisible.value = visible.value
})

// 声明 取消 和 确定两个 方法
let cancel = () => {
    emits('dialogcancel')
}
// 声明一个ref引入 dialog结构
let dialogForm = ref()
let confirm = (form) => {
    form.validate(valid => {
        if (valid) {
            // 表单校验通过
            emits('validateSucess', dialogForm)
        } else {
            // 不通过

        }
    })
}

// dialog被关闭的时候触发的事件
let close = () => [
    emits('closed')
]       

</script>